<template>
  <div class="map_page">
    <div id="container" ref="refcontainer"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import $ from "jquery";

import img1 from "@/assets/images/map/1.png";
import img2 from "@/assets/images/map/2.png";
import img3 from "@/assets/images/map/3.png";
import img4 from "@/assets/images/map/4.png";
import img5 from "@/assets/images/map/5.png";

export default {
  name: "mapPage",
  props: {
    mapArr: {
      type: Array,
      default: () => [
        // {
        //   name: "万佛湖景区",
        //   lon: "116.757583",
        //   lot: "31.293056",
        // },
      ],
    },
  },
  watch: {
    mapArr: {
      handler(newVla) {
        if (newVla.length) {
          console.log(newVla, "newVlanewVla");
          this.returnData = newVla;
          this.mapChart();
        } else {
          this.returnData = [];
          this.mapChart();
        }
      },
    },
  },
  data() {
    return {
      container: null,
      img: null,
      // returnData: [],
      // returnData: [
      //   {
      //     jingquId: 6,
      //     jingquName: "毛主席视察舒茶纪念馆",
      //     lat: "31.32222000000000",
      //     lon: "117.04021700000000",
      //   },
      //   {
      //     jingquId: 5,
      //     jingquName: "万佛湖a",
      //     lat: "31.31060300000000",
      //     lon: "116.78350900000000",
      //   },
      //   {
      //     jingquId: 3,
      //     jingquName: "小木屋度假村a",
      //     lat: "31.28405300000000",
      //     lon: "116.71621300000000",
      //   },
      //   {
      //     jingquId: 7,
      //     jingquName: "龙眠寨",
      //     lat: "31.18093400000000",
      //     lon: "116.87216400000000",
      //   },
      //   {
      //     jingquId: 10,
      //     jingquName: "鸡鸣寺",
      //     lat: "32.06712500000000",
      //     lon: "118.80186100000000",
      //   },
      //   {
      //     jingquId: 12,
      //     jingquName: "鼓楼",
      //     lat: "32.06494100000000",
      //     lon: "118.78999200000000",
      //   },
      //   {
      //     jingquId: 13,
      //     jingquName: "合肥大蜀山国家森林公园",
      //     lat: "31.84162600000000",
      //     lon: "117.17041700000000",
      //   },
      // ],
    };
  },
  methods: {
    mapChart() {
      this.container?.dispose();
      this.container = null;

      let mapData = this.returnData;
      this.container = echarts.init(document.getElementById("container"));
      window.addEventListener("resize", () => {
        this.container?.resize();
      });
      $.getJSON(`/map/NanJing.json`, (data) => {
        // 一级地图
        echarts.registerMap("舒城县", data);

        this.initEcharts(mapData, data);
      });

      let self = this;
      // 点击触发
      self.container.off("click");

      self.container.on("click", (param) => {});

      // 取消鼠标移入高亮
      self.container.on("mouseover", function (params) {
        self.container.dispatchAction({
          type: "legendUnSelect",
        });
      });
    },
    initEcharts(mapData, data) {
      console.log(mapData, data, this.returnData, "mapDatamapData");
      let self = this;
      let arr = [];
      var seriesData = [];
      seriesData.push({});
      let option = {
        tooltip: {
          show: true,
          //仅在 options中最外层的 tooltip.trigger 为 'item'时有效
          position: "bottom",
          formatter: function (params, ticket, callback) {
            console.log(params);
            let data = self.returnData[params.dataIndex];
            var strHtml = `
              <div class="point_item">
                <div class="item_top">${data.jingquName}</div>
                <div class="item_bottom">
                  <div class="b_left">
                    <img src="${data.jingquPictureUrl}"  />
                  </div>
                  <div class="b_right">
                    <p><span>当前在园人数：</span><span>8100</span></p>
                    <p><span>游玩体验度：</span><span class="tiyandu">拥挤</span></p>
                    <p><span>未来1小时入园人数：</span>2030<span></span></p>
                    <s class="more">景区监控</s>
                  </div>
                </div>
              </div>`;
            return strHtml;
          },
          enterable: true,
          confine: true,
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            animation: true, //坐标点是否显示动画

            symbol: "pin",
            rippleEffect: {
              brushType: "fill", // stroke|fill
            },
            label: {
              show: true, // 是否显示标签
              color: "#fff", // 颜色
              distance: 0, // 距离图形元素的距离
              position: "bottom", // 标签的位置
              fontSize: 16, // 字体大小
              formatter: "{b}", // 标签内容
            },
            symbolSize: function (val, params) {
              //坐标点大小
              return 30;
            },
            data: self.returnData?.map(function (itemOpt) {
              return {
                name: itemOpt.jingquName,
                value: [
                  parseFloat(Number(itemOpt.lon)), //经度
                  parseFloat(Number(itemOpt.lat)), //纬度
                ],

                itemStyle: {
                  //地图区域的多边形
                  normal: {
                    color: "#fff", //坐标点颜色
                    shadowBlur: 10, // 图形阴影的模糊大小
                    shadowOffsetX: 0, // 阴影水平方向上的偏移距离。
                  },
                },
              };
            }),
            symbol: function (value, param) {
              let type = self.mapArr[0].type;
              // console.log(value, param, this.mapArr);
              // let item = self.returnData[param.dataIndex];
              if (type == 1) {
                return "image://" + img1;
              } else if (type == 2) {
                return "image://" + img2;
              } else if (type == 3) {
                return "image://" + img3;
              } else if (type == 4) {
                return "image://" + img4;
              } else if (type == 5) {
                return "image://" + img5;
              } else {
                return "image://" + img1;
              }
            },
            symbolSize: 80,
            // hoverSymbolSize: 40,
          },
        ],
        geo: {
          type: "map",
          map: "舒城县",
          aspectScale: 0.85,
          zoom: 0.85,
          roam: false,
          itemStyle: {
            areaColor: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(91, 127, 137,0)",
            borderWidth: 3,
            shadowColor: "rgba(91, 127, 137, 0.45)",
            shadowBlur: 6,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
          },
        },
      };
      this.container.setOption(option);
    },
  },
  mounted() {
    this.mapChart();
  },
  created() {
    this.flexible();
  },
  destroyed() {
    document.body.style.fontSize = "12px";
    this.container?.dispose();
    this.container = null;
  },
};
</script>
<style>
.point_item {
  width: 28rem;
  height: 18rem;
  background-image: url(~@/assets/images/newImg/11.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
  color: #fff;
  padding: 5%;
  padding-top: 0;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.item_top {
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
  text-align: left;
  color: #fff;
  font-size: 20px;
}

.item_bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.b_left {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
}

img {
  width: 100%;
  height: 50%;
}

.b_right {
  text-align: left;
  width: 65% !important;
  margin-left: 4%;
}
.tiyandu {
  color: #ff0a0a;
}

.more {
  color: #06e6e8;
  text-decoration: underline;
  cursor: pointer;
}

p {
  margin: 0.25rem;
}
</style>
<style lang="scss" scoped>
@import "@/utils/px2vwvh.scss";

.map_page {
  @include px2vw(width, 735);
  @include px2vh(height, 615);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  @include px2vh(top, 120);
  bottom: 0;
  z-index: 0;
  // background: url(~@/assets/images/bg.png) no-repeat;
  // background: url(~@/assets/images/map/map_bg.png) no-repeat;
  background-size: 50% 60%;
  background-position: center 36%;
  #container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-image: url(~@/assets/images/newImg/map.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    overflow: hidden;
  }
}
</style>
